<!DOCTYPE html>
<html xmlns:th="Thymeleaf" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>左侧导航栏</title>
</head>

<body>
<footer th:fragment="left">
    <link type="text/css" rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <script type="text/javascript">
        $(function() {
            $('.onemenu').on('click',onemenus);
            $('.menuItem').on('click', menuItem);
        });
        function onemenus() {
            if($(this).parent("li").hasClass("active")){
                $(this).parent("li").removeClass("active");
                $(this).parent("li").find("ul").css("display","none");
            }else{
                $(this).parent("li").addClass("active");
                $(this).parent("li").find("ul").css("display","block");
            }
        }

        function menuItem() {
            alert(1);
            $(".nav ul li, .nav li").removeClass("selected");
            $(this).parent("li").addClass("selected");
        }

    </script>
    <div class="leftmenu">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="nav-close">
                <i class="fa fa-times-circle"></i>
            </div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <a th:href="@{/index}">
                    <li class="logo">
                        <span class="logo-lg" >JjClub</span>
                    </li>
                </a>
              <!--  <li>
                    <div class="user-panel">
                        <a class="menuItem" title="个人中心" th:href="@{/system/user/profile}">
                            <div class="hide" th:text="个人中心"></div>
                            <div class="pull-left image">
                            </div>
                        </a>
                        <div class="pull-left info">
                            <p>测试</p>
                            <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                            <a th:href="@{logout}" style="padding-left:5px;"><i class="fa fa-sign-out text-danger"></i> 注销</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><i class="fa fa-home"></i> <span class="nav-label">主页</span> <span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a class="menuItem" th:href="@{/system/main}">了解若依</a></li>
                    </ul>
                </li>-->
                <li th:each="menu : ${menus}">
                    <a th:class="@{${menu.url == '#'} ? |onemenu|}" th:href="@{${menu.url == ''} ? |#| : ${menu.url}}">
                        <i class="fa fa-bar-chart-o" th:class="${menu.classStyle}"></i>
                        <span class="nav-label" th:text="${menu.name}" >一级菜单</span>
                        <span th:class="${menu.url == '' || menu.url == '#'} ? |fa arrow|"></span>
                    </a>
                   <ul class="nav nav-second-level collapse">
                        <li th:each="cmenu : ${menu.children}">
                            <a  th:href="@{${cmenu.url}}" target="iframe0" >
                                <i class="fa fa-bar-chart-o" th:class="${cmenu.classStyle}"></i>
                                <span class="nav-label" th:text="${cmenu.name}" ></span>
                            </a>
                            <ul class="nav nav-second-level collapse">
                                <li th:each="ccmenu : ${cmenu.children}">
                                    <a  th:href="@{${ccmenu.url}}" target="iframe0" >
                                        <i class="fa fa-bar-chart-o" th:class="${ccmenu.classStyle}"></i>
                                        <span class="nav-label" th:text="${ccmenu.name}" ></span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        </nav>
    </div>
</footer>
</body>
</html>
